<template>
	<view style="height: 100%;" class="">
		<!-- 遮罩层 -->
		<view @click="handleClose()" class="mask pay-actionsheet-mask" :class="[show?'pay-mask-show':'']"></view>
		<!-- 组件内容 -->
		<view class="fixed-bottom xpy pay-actionsheet rounded-top-lg overflow-hidden" style="z-index: 1250;"
			:class="[show?'pay-actionsheet-show':'']" :style="{height:Number(Height)+'%;',backgroundColor:bgColor}">
			<uni-icons @click="handleClose()" color="#828d96"
				style="z-index: 99; position: absolute;top:20rpx; right: 20rpx;" type="closeempty"
				size="20"></uni-icons>
			<!-- 标头 -->
			<view v-if="title!=''" class="w-100 flex justify-center align-center bg-white" style=" height: 100rpx;">
				<text class="font">{{title}}</text>
			</view>
			<!-- 内容 -->
			<scroll-view @scrolltolower="onReachScollBottom" scroll-y="true" class="w-100"
				:style="'height: calc(100% - '+ ((title?100:0) + (button.length>0?110:0))+'rpx);'">
				<slot></slot>
			</scroll-view>
			<view v-if="button.length==2" class="fixed-bottom bg-white flex align-center justify-between"
				style="height: 110rpx;">
				<view @click="submit1()" class="ml-3 w-100 bg-dark px-3 py-2 rounded-circle-left flex justify-center">
					<text class="text-white font">{{button[0]}}</text>
				</view>
				<view @click="submit2()"
					class="mr-3 w-100 bg-success px-3 py-2 rounded-circle-right flex justify-center">
					<text class="text-white font">{{button[1]}}</text>
				</view>
			</view>
			<view v-else-if="button.length==1" class="fixed-bottom bg-white flex align-center justify-between"
				style="height: 110rpx;">
				<view @click="submit1()" class="mx-3 w-100 bg-success px-3 py-2 rounded-circle flex justify-center">
					<text class="text-white font">{{button[0]}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {


			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			Height: {
				type: String,
				default: '50'
			},
			title: {
				type: String,
				default: ''
			},
			button: {
				type: Array,
				default: () => {
					return []
				}
			},
			bgColor: {
				type: String,
				default: '#f8f9fa'
			}
		},
		methods: {
			handleClose() { //关闭
				this.$emit('Close');
			},
			submit1() { //提交
				this.$emit('submit1');
			},
			submit2() { //提交2
				this.$emit('submit2');
			},
			onReachScollBottom() {
				this.$emit('scrollTolower')
			}
		},
		mounted() { //获取数据

		}
	}
</script>

<style lang="scss" scoped>
	@media screen and (min-width:840px) {
		.xpy {
			width: 800rpx !important;
			margin: 0 auto;
			height: 60%;
		}
	}

	.pay-actionsheet {
		width: 100%;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.pay-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.pay-actionsheet-mask {
		background: rgba(0, 0, 0, 0.8);
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.pay-mask-show {
		opacity: 1;
		visibility: visible;
	}

	.rounded-top-lg {
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
	}

	.rounded-circle-left {
		border-top-left-radius: 100rpx;
		border-bottom-left-radius: 100rpx;
	}

	.rounded-circle-right {
		border-top-right-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
	}
</style>